custom hook Hook 사용예제: useNotification Notifications Api를 사용하여 사용자에게 데스크톱 알림을 보여주는 기능을 구현하였다. fireNotif함수를 실행하면 알림을 보낼 수 있는지 먼저 Notification.permission을 통해 확인한다. 만약 permission이 "granted"라면 설정된 title과 options를 사용하여 새 Notification 객체 인스턴스를 생성한다. 그렇지 않다면 Notific... useNotificationnotificationhookcustom hookcustom hook Hook 사용예제: useScroll, useFullScreen useScroll 스크롤을 사용할 때, 현재 위치한 x, y좌표값의 조건에 따라 색상이 바뀌는 기능을 구현하였다. useScroll함수를 코딩하면서 현재 scroll의 좌표를 확인하고 싶어 onScroll함수안에 console.log(state);를 구현했었다. 하지만 state가 계속 초기값으로 출력되길래 몇 시간 동안 구글링과 stackoverflow, 오픈카톡을 돌아다녔다. 알아낸 결과... useScrolluseFullscreenhookcustom hookcustom hook Api 호출하는 커스텀 훅 만들기 하지만 업데이트 api를 사용할 때에는 유저의 인풋값을 state에 저장한후, state 값을 api에 실어보내서 업데이트 하는 상황이 많다. 따라서 이벤트 함수를 호출할 때에 api를 호출한 후, 'api 호출에 성공'했으면 '상태 값도 업데이트'를 해줘야 한다. react-async 라이브러리로 상태값을 없데이트 하는 방법에서는 useEffect [] 안의 data 가 변경이 감지되면 상... custom hookReactAPIhookreact-async비동기API React.org - Hook 함수 컴포넌트에서 React state와 lifecycle features을 "연동(hook into)"할 수 있게 해주는 함수 React 16.8버젼에 새로 추가 되었다.(이후 모든 패키지를 업그레이드해야한다.) 이는 this.state.count와 this.setState와 유사하다. this.setState와 setState는 많은 부분이 같지만 state 갱신하는 방법이 다르다. Ef... State hookreact 공식문서custom hookEffetct HookEffetct Hook
Hook 사용예제: useNotification Notifications Api를 사용하여 사용자에게 데스크톱 알림을 보여주는 기능을 구현하였다. fireNotif함수를 실행하면 알림을 보낼 수 있는지 먼저 Notification.permission을 통해 확인한다. 만약 permission이 "granted"라면 설정된 title과 options를 사용하여 새 Notification 객체 인스턴스를 생성한다. 그렇지 않다면 Notific... useNotificationnotificationhookcustom hookcustom hook Hook 사용예제: useScroll, useFullScreen useScroll 스크롤을 사용할 때, 현재 위치한 x, y좌표값의 조건에 따라 색상이 바뀌는 기능을 구현하였다. useScroll함수를 코딩하면서 현재 scroll의 좌표를 확인하고 싶어 onScroll함수안에 console.log(state);를 구현했었다. 하지만 state가 계속 초기값으로 출력되길래 몇 시간 동안 구글링과 stackoverflow, 오픈카톡을 돌아다녔다. 알아낸 결과... useScrolluseFullscreenhookcustom hookcustom hook Api 호출하는 커스텀 훅 만들기 하지만 업데이트 api를 사용할 때에는 유저의 인풋값을 state에 저장한후, state 값을 api에 실어보내서 업데이트 하는 상황이 많다. 따라서 이벤트 함수를 호출할 때에 api를 호출한 후, 'api 호출에 성공'했으면 '상태 값도 업데이트'를 해줘야 한다. react-async 라이브러리로 상태값을 없데이트 하는 방법에서는 useEffect [] 안의 data 가 변경이 감지되면 상... custom hookReactAPIhookreact-async비동기API React.org - Hook 함수 컴포넌트에서 React state와 lifecycle features을 "연동(hook into)"할 수 있게 해주는 함수 React 16.8버젼에 새로 추가 되었다.(이후 모든 패키지를 업그레이드해야한다.) 이는 this.state.count와 this.setState와 유사하다. this.setState와 setState는 많은 부분이 같지만 state 갱신하는 방법이 다르다. Ef... State hookreact 공식문서custom hookEffetct HookEffetct Hook